<template>
  <el-container>
    <el-form
      ref="regForm"
      class="regForm"
      :model="regForm"
      :rules="rules"
      label-position="right"
      label-width="auto"
    >
      <el-form-item prop="username" label="用户名：">
        <el-input v-model.trim="regForm.username"> </el-input>
      </el-form-item>

      <el-form-item prop="password" label="密码：">
        <el-input v-model="regForm.password"> </el-input>
      </el-form-item>
      <el-form-item prop="confirmedPassword" label="确认密码：">
        <el-input v-model="confirmedPassword" placeholder="再次输入确认密码">
        </el-input>
      </el-form-item>
      <el-form-item prop="nickname" label="昵称：">
        <el-input v-model="regForm.nickname"> </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-edit" @click="regFormSubmit()"
          >提交
        </el-button>
        <el-button type="warning" icon="el-icon-remove" @click="reset"
          >重置
        </el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
// import New from './components/New.vue';
import { registerApi, usernameExistApi } from "@/api/apis";
export default {
  name: "Reg",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      regForm: {
        username: null,
        password: null,
        nickname: null,
      },
      confirmedPassword: null,
      /*    rules: {
          username: [
              {required: true,   message: '请输入账号', trigger: 'blur'},
              {pattern: /^\w+$/, message: '请输入字母/数字/下划线', trigger: ['blur','change']},
              { validator:this.validateItem ,trigger:'blur'}
              ],
          password: [
              {required: true, message: '请输入密码', trigger: 'blur'},
              ],
          }
      */
      rules: {
        username: [
          { required: true, message: "请输入注册账号", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9_-]{6,12}$/,
            message: "用户名必须是字母数字下划线6-12位",
            trigger: "blur",
          },
          { validator: this.validateUsername, trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9]{4,8}$/,
            message: "密码必须是字母数字4-8位",
            trigger: "blur",
          },
        ],
        confirmedPassword: [
          // { required: true, message: "请输入密码", trigger: "blur" },
          { validator: this.confirmPwd, trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    validateUsername(rules, value, callback) {
      // this.$http({
      //   method: "get",
      //   url: `/regAbout/usernameExits?username=${value}`,
      // })
      usernameExistApi(value).then(
        (res) => {
          let isExist = res.data;
          if (isExist) {
            return callback(new Error("该账号已经被注册，请重新输入"));
          } else {
            return callback();
          }
        },
        (error) => {
          console.log(" request error : " + error.response.status);
          return callback();
        }
      );
    },
    confirmPwd(rules, value, callback) {
      console.log(this.confirmedPassword, this.regForm.password);
      if (!Object.is(this.confirmedPassword, this.regForm.password)) {
        callback(new Error("密码不一致"));
      } else {
        callback();
      }
    },
    regFormSubmit() {
      this.$refs.regForm.validate((valid) => {
        if (valid) {
          // this.$http({
          //   method: "post",
          //   url: "/regAbout/register",
          //   data: this.regForm,
          // })
          registerApi(this.regForm).then(
            (res) => {
              if (res.data) {
                this.$message.success("注册成功,2秒后自动跳转登录页面");
                setTimeout(() => {
                  this.$router.push({
                    path: "/logon",
                    query: {
                      username: this.regForm.username,
                    },
                  });
                }, 1900);
              } else {
                this.$message.warning("注册失败");
              }
            },
            (error) => {
              console.log(".regForm request error : " + error.response.status);
            }
          );
        } else {
          this.$message.warning("验证不通过请重新填写表单");
        }
      });
    },
    reset() {
      this.$refs.regForm.resetFields();
      this.confirmedPassword = null;
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-container {
  justify-content: center;
  align-items: center;
  margin-top: 100px;
}
</style>
